<template>
<div class="every">
  <div class="music">
    <ul>
      <li>全部</li>
      <li>华语</li>
      <li>欧美</li>
      <li>日本</li>
      <li>韩国</li>
    </ul>
  </div>
  <div class="table">
    <table>
      <thead>
        <tr>
          <td></td>
          <td></td>
          <td>音乐标题</td>
          <td></td>
          <td></td>
          <td>歌手</td>
          <td></td>
          <td></td>
          <td>专辑</td>
          <td></td>
          <td>时长</td>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr v-for="(item,index) in lists" :key="'table_row'+index" class="table_row">
          <td>{{index+1}}</td>
          <td><img :src="item.album.picUrl" alt="" width="50px" height="50px;"></td>
          <td colspan="2">{{item.name}}</td>
          <td></td>
          <td>{{item.album.artists[0].name}}</td>
          <td></td>
          <td></td>
          <td>{{item.album.name}}</td>
          <td></td>
          <td>{{ item.duration }}</td>
        </tr>
      </tbody>
   </table>
  </div>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'
export default {
   data() {
     return {
      //  歌曲列表
      lists: []
     }
   },
   created() {
    //  获取最新音乐
     axios({
       url: 'https://autumnfish.cn/top/song',
       method: "get",
       params:{
         type: 0
       }
     }).then(res => {
      //  console.log(res)
      this.lists = res.data.data
      // 处理时长
      for(let i=0;i<this.lists.length;i++){
        let duration = this.lists[i].duration
        // 获取毫秒数
      let min = parseInt(duration/1000/60)
      let sec = parseInt((duration/1000/60))%60
      if(min<10){
        min='0'+min
      }
      if(sec<10){
        sec='0'+sec
      }
      console.log(min,sec)
      this.lists[i].duration = `${min}:${sec}`
      }
     })
   }
  }
</script>

<style>
.every{
  overflow:scroll;
  height: 600px;
}
*{
  margin:0;
  padding:0;
  font-size:14px;
}
.music{
  width: 80%;
}
.music ul li{
  float:right;
  padding-left:40px;
  margin-top:30px;
}
.table{
 padding-top:5%;
 width: 80%;
 clear:both;
}
.table table tr td{
  width: 5%;
  text-align:left;
  height: 50px;
}
.table table{
  border-spacing:0;
  border:0;
  padding-left:10%;
}

</style>